<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scale=1.0" name="viewport">
    <title>Dream</title>
    <link href="../img/doraemon.ico" rel="icon">
    <link href="../out/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
    <link href="../out/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/normal.css" rel="stylesheet">
    <link href="../css/header.css" rel="stylesheet">
    <link href="../css/recommend.css" rel="stylesheet">
    <script src="../out/bootstrap4/js/jquery-3.6.1.min.js"></script>
    <script src="../out/bootstrap4/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<header>
    <div class="myNav container-fluid">
        <div class="row">
            <div class="col-12">
                <nav class="navbar navbar-expand-sm navbar-dark">
                    <!-- Brand -->
                    <a class="navbar-brand d-flex" href="../index.html"><img alt="img" src="../img/doraemon_logo.png"
                                                                             style="width: 3rem"><span
                            style="font-family: '方正少儿_GBK',serif;color: white;font-size: 2rem;">哆啦A梦</span></a>

                    <!-- Toggler/collapsibe Button -->
                    <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse"
                            type="button">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- Navbar links -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav w-100 justify-content-center align-items-end align-items-sm-center">
                            <li class="nav-item">
                                <a class="nav-link p-1" href="../index.html">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 active " href="recommend.html">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="special.html">专题</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="film.html">剧场版</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="play.html">视频</a>
                            </li>
                            <li class="nav-item">
                                <a class="d-block d-sm-none border login p-1 rounded nav-link"
                                   href="login.html">注册/登录</a>
                            </li>
                        </ul>
                    </div>
                    <a class="d-none d-sm-block border p-1 rounded nav-link login" href="login.html">注册/登录</a>
                </nav>
            </div>
        </div>
    </div>
</header>

<div class="mySlide container-fluid">
    <div class="row">
        <div class="col-12 p-0 m-0">
            <img class="w-100" src="../img/doraemo_bg_1.jpg">
        </div>
    </div>
</div>
<!--content-->
<div class="myContent container" style="z-index: 10">
    <div class="row p-5">
        <div class="col-12 justify-content-center d-flex"><span class="font-weight-bold">精彩推荐</span></div>
        <div class="mt-2 mb-4 col-12 justify-content-center d-flex"><span
                class="font-weight-bold text-primary">——</span></div>
        <div class="col-12">
            <div class="row">
                <div class="col-md-4 col-6">
                    <figure>
                        <div class="outBox">
                            <img class="img-fluid" src="../img/wonderful/wonderful_1.jpg">
                        </div>
                        <figcaption class="p-1 d-flex justify-content-between align-items-end"><span>精彩图片</span>
                            <a class="information" href="#">了解更多</a>
                        </figcaption>
                    </figure>
                </div>
                <div class=" col-md-4 col-6">
                    <figure>
                        <div class="outBox">
                            <img class="img-fluid" src="../img/wonderful/wonderful_2.jpg">
                        </div>
                        <figcaption class="p-1 d-flex justify-content-between align-items-end"><span>精彩图片</span>
                            <a class="information" href="#">了解更多</a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 col-6">
                    <figure>
                        <div class="outBox">
                            <img class="img-fluid" src="../img/wonderful/wonderful_3.png">
                        </div>
                        <figcaption class="p-1 d-flex justify-content-between align-items-end"><span>精彩图片</span>
                            <a class="information" href="#">了解更多</a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 col-6">
                    <figure>
                        <div class="outBox">
                            <img class="img-fluid" src="../img/wonderful/wonderful_8.png">
                        </div>
                        <figcaption class="p-1 d-flex justify-content-between align-items-end"><span>精彩图片</span>
                            <a class="information small">暂无更多信息</a>
                        </figcaption>
                    </figure>
                </div>
                <div class="col-md-4 col-6">
                    <figure>
                        <div class="outBox">
                            <img class="img-fluid" src="../img/wonderful/wonderful_9.jpg">
                        </div>
                        <figcaption class="p-1 d-flex justify-content-between align-items-end"><span>精彩图片</span>
                            <a class="information small">暂无更多信息</a>
                        </figcaption>
                    </figure>
                </div>
                <div class=" col-md-4 col-6">
                    <figure>
                        <div class="outBox">
                            <img class="img-fluid" src="../img/wonderful/wonderful_10.jpg">
                        </div>
                        <figcaption class="p-1 d-flex justify-content-between align-items-end"><span>精彩图片</span>
                            <a class="information small">暂无更多信息</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="m-0 p-0">
    <div class="container-fluid bg-dark p-3">
        <div class="row">
            <div class="col-12 col-lg-4 offset-lg-0 col-md-5 offset-md-0 col-sm-5 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-start">
                <img alt="..."
                     src="../img/doraemon_logo.png"
                     style="width: 2rem">
                <span style="font-family: '方正少儿_GBK',serif;color: white;font-size: 1.5rem;">哆啦A梦</span>
            </div>
            <div class="col-12 col-lg-4 offset-lg-4 col-md-5 offset-md-2 col-sm-7 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-end">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-twitter bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-weibo bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-wechat bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<script src="../js/normal.js"></script>
<script>
    let before, now;
    window.onload = function () {
        let imgs = document.getElementsByClassName("outBox");
        for (const img in imgs) {
            imgs[img].onclick = function () {
                before = document.body.scrollTop || document.documentElement.scrollTop;
                show(imgs[img].innerHTML);
            };
        }
    }

    function scrollBody(e) {
        e.returnValue = false;
        document.documentElement.scrollTop = document.body.scrollTop = before;
    }

    function show(img) {

        let exist = document.getElementById("show");
        if (typeof exist != "undefined" && exist != null) {
            exist.remove();
        }
        let div = document.createElement("div");
        div.innerHTML = img;
        div.onclick = function () {
            this.remove();
            document.removeEventListener("wheel", scrollBody);
            document.removeEventListener("scroll", scrollBody);
            document.removeEventListener("touchmove", scrollBody);
        }
        div.id = "show";
        div.className = "container-fluid justify-content-center align-items-center d-flex";
        div.style.cssText = 'overflow:hidden;with:100%;height:100%;position:fixed;top:0;left:0;z-index:999;background-color:rgba(0,0,0,0.5)';
        document.body.append(div);
        document.addEventListener("wheel", scrollBody, {passive: false})
        document.addEventListener("scroll", scrollBody, {passive: false})
        document.addEventListener("touchmove", scrollBody, {passive: false})

    }
</script>
</body>
</html>